<template>
  <div class="collect-box">
    <div class="collect">
      <div>已收藏系统</div>
      <div>
        <el-button type="primary" link v-if="disabled" @click="handleEdit">
          编辑
        </el-button>
        <el-button type="info" link v-if="!disabled" @click="handleCancel">
          取消
        </el-button>
        <el-button type="primary" link v-if="!disabled" @click="handleAffirm">
          确定
        </el-button>
      </div>
    </div>
    <div class="collectList">
      <VueDraggableNext
        class="wrapper"
        chosen-class="chose"
        force-fallback="true"
        animation="200"
        v-model="collectAppList"
        :disabled="disabled"
        v-if="collectAppList.length"
      >
        <transition-group>
          <div
            class="item"
            v-for="(item, index) in collectAppList"
            :key="item.id"
          >
            <img
              v-if="!disabled"
              src="../../../assets/images/sort.svg"
              style="margin-right: 4px; width: 20px"
            />
            <el-card
              shadow="hover"
              class="box-card"
              @click.stop="handleCollect(item)"
            >
              <p class="item-content">
                <span class="name">{{ item.app_name }}</span>
                <el-icon
                  :size="16"
                  color="#F56C6C"
                  v-if="!disabled"
                  @click.stop="deleteCollect(index)"
                >
                  <Remove />
                </el-icon>
              </p>
            </el-card>
          </div>
        </transition-group>
      </VueDraggableNext>
      <el-empty v-else description="暂无收藏系统" />
    </div>
  </div>
</template>

<script setup>
import { VueDraggableNext } from 'vue-draggable-next';
import { computed, watch } from 'vue';
import { postNavigateCollectSort } from '@/api/navList';

const disabled = ref(false);
const collectAppList = ref([]);
const props = defineProps(['data', 'loading']);
const emit = defineEmits(['update:loading', 'updateData', 'handleAppList']);
const data = computed({
  get: () => props.data
});
watch(data, (newValue, oldValue) => {
  disabled.value = true;
  collectAppList.value = JSON.parse(JSON.stringify(newValue));
});
// 点击编辑
const handleEdit = () => {
  disabled.value = false;
};
// 点击取消
const handleCancel = () => {
  disabled.value = true;
  collectAppList.value = JSON.parse(JSON.stringify(props.data));
};
const handleAffirm = () => {
  const ids = collectAppList.value.map(e => {
    return e.id;
  });
  emit('update:loading', true);
  const params = {
    ids: ids
  };
  postNavigateCollectSort(params)
    .then(() => {
      disabled.value = false;
      emit('updateData');
    })
    .finally(() => {
      disabled.value = false;
    });
};
// 删除
const deleteCollect = index => {
  collectAppList.value.splice(index, 1);
};
// 点击跳转

const handleCollect = item => {
  if (disabled.value === false) return;
  emit('handleAppList', item);
};
</script>

<style lang="scss" scoped>
:deep(.box-card .el-card__body) {
  width: 100% !important;
  padding: 0 !important;
}
:deep(.box-card) {
  width: 100% !important;
  padding: 0 !important;
}
:deep(.chose .el-card__body) {
  background-color: #e5f2f2;
  box-shadow: 0;
  border: none;
}
.sortable-ghost {
  background-color: #e5f2f2 !important;
  box-shadow: 0;
  border: none;
}
.collect-box {
  height: 100%;
  color: #2c3e50;
  display: flex;
  flex-direction: column;
  .collect {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .collectList {
    flex: 1;
    overflow: auto;
    .item {
      // height: 50px;
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      font-size: 14px;
      .item-content {
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
        align-items: center;
        padding: 0 10px;
        cursor: pointer;
        flex: 1;
        margin: 0;
        .name {
          display: -webkit-box;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .delete {
          color: #f56c6c;
          cursor: pointer;
          font-size: 20px;
          width: 20px;
        }
      }
    }
  }
}
// 7fbfbf
.chose {
  background-color: #e5f2f2;
  border: 1px solid #008080 !important;
  cursor: move !important;
  border-radius: 4px;
}
</style>
